<template>
	<view class="container">
		<!-- swiper box -->
		<view class="wrap">
			<u-swiper :list="list" height="262"></u-swiper>
		</view>
		<!-- 商品分类 -->
		<view class="good-icon-box">
			<view class="column-top-box" v-for="(columnItem,index) in columnList" :key="index">
				<image class="column-img" :src="columnItem.columnUrl" mode=""></image>
				<text>{{columnItem.columnTitle}}</text>
			</view>
		</view>
		<!-- 热门榜单 -->
		<view class="">
			<view class="hot-title-box">
				<u-cell-item icon="pause" title="热门榜单"></u-cell-item>
			</view>
			<view class="">
				<scroll-view scroll-x="true">
					<view style="display: flex;">
						<view class="hot-box" v-for="(hotItem,index) in 8" :key="index">
							<view class="hot-item-box">
								<image class="wh-100" src="../../../static/19.png" mode=""></image>
								<view class="hot-item-text-box flex-jc-ac-fc wh-100">
									<text class="text-36-ffffff-b">黔东南</text>
									<text class="text-16-ffffff">西江千户苗寨景区</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 热点资讯 -->
		<view class="">
			<view class="">
				<u-cell-item style="margin-top: 0;" icon="pause" title="热点资讯"></u-cell-item>
			</view>
			<view class="zixun-box" >
				<view class="zixun-list flex-js-ac" v-for="(zixunItem,index) in 8" :key="index">
					<view class="zixun-list-box flex-j-sb-as-fc">
						<text class="line-2 text-28-161616">景点假期攻略来啦！景点假期攻略来啦！景点假期攻略来啦！</text>
						<view class="zixun-bottom-zz">
							<text class="text-18-A4A4A4">贵州政府</text>
							<text class="text-18-A4A4A4">2021/5/7</text>
						</view>
					</view>
					<image src="../../../static/19.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				columnList: [{
						columnUrl: require("../../../static/icon/indexColumn/1.png"),
						columnTitle: "文化",
						pagePath: "",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/2.png"),
						columnTitle: "旅游",
						pagePath: "",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/3.png"),
						columnTitle: "产业",
						pagePath: "",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/4.png"),
						columnTitle: "资讯",
						pagePath: "",
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 20rpx;
	}
	.wrap {
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		background-color: #558EE7;
	}

	.good-icon-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		row-gap: 20rpx;
		align-items: center;
	}

	.column-top-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.column-img {
		height: 90rpx;
		width: 90rpx;
		margin-top: 58rpx;
	}

	.column-top-box>text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0F0F0F;
		margin-top: 20rpx;
	}

	.index-column-all-box {
		grid-column: 1/5;
		height: 105rpx;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.index-column-all-box> :nth-child(1) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.index-column-all-box> :nth-child(2) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}
	.hot-title-box{
		padding-bottom: 10rpx;
	}

	.hot-box {
		display: flex;
		margin-left: 25rpx;
	}

	.hot-item-box {
		position: relative;
		height: 271rpx;
		width: 216rpx;
	}

	.hot-item-text-box {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.zixun-box{
		margin-top: 10rpx;
	}
	.zixun-list{
		margin-bottom: 20rpx;
	}
	.zixun-list-box{
		height: 122rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		flex: 1;
	}
	.zixun-list >image{
		height: 142rpx;
		width: 235rpx;
		margin-right: 25rpx;
	}
	.zixun-bottom-zz >text:nth-of-type(1){
		margin-right: 40rpx;
		opacity: 0.5;
	}
	.zixun-bottom-zz >text:nth-of-type(2){
		opacity: 0.5;
	}
</style>
